import React from "react";

const links = [
  {
    name: "中央网络安全和信息化委员会办公室",
    url: "http://www.cac.gov.cn/",
  },
  {
    name: "国家税务总局",
    url: "http://www.chinatax.gov.cn/",
  },
  {
    name: "国家市场监督管理总局",
    url: "http://www.samr.gov.cn/",
  },
  {
    name: "中华人民共和国文化和旅游部",
    url: "https://www.mct.gov.cn/",
  },
  {
    name: "国家广播电视总局",
    url: "http://www.nrta.gov.cn/",
  },
  {
    name: "中华人民共和国公安部",
    url: "http://www.mps.gov.cn/",
  },
  {
    name: "中华人民共和国工业和信息化部",
    url: "https://www.miit.gov.cn/",
  },
  {
    name: "中华人民共和国人力资源和社会保障部",
    url: "http://www.mohrss.gov.cn/",
  },
  {
    name: "中华人民共和国农业农村部",
    url: "http://www.moa.gov.cn/",
  },
  {
    name: "中国人民银行",
    url: "http://www.pbc.gov.cn/",
  },
];

export default function FriendlyLinks() {
  return (
    <section className="py-12 bg-[#F5F5F5]">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-8 text-red-600">友情链接</h2>
        {/* 红色分割线 */}
        <div className="border-b-2 border-[#DB2626] mt-8"></div>
        <div className="overflow-x-auto">
          <table className="w-full text-center">
            <tbody>
              {/* 每行显示 5 个链接 */}
              {[...Array(Math.ceil(links.length / 5))].map((_, rowIndex) => (
                <tr key={rowIndex}>
                  {links.slice(rowIndex * 5, (rowIndex + 1) * 5).map((link, index) => (
                    <td key={index} className="px-2 py-1">
                      <a
                        href={link.url} // 设置跳转链接
                        target="_blank" // 在新标签页打开
                        rel="noopener noreferrer" // 安全推荐
                        className="text-black hover:text-blue-800 transition-colors"
                      >
                        {link.name}
                      </a>
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}
